<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lijincheng
  Date: 2021/6/4
  Time: 10:52 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/order/css.css" rel="stylesheet">
    <script src="/js/jquery-3.5.1.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        th{
            text-align: center;
        }
    </style>
</head>
<body>
<div style="width: 100%">
    <table border="1" class="table text-center">
        <tr class="text-center">
            <th>订单编号</th>
            <th>订单价格</th>
            <th>订单时间</th>
            <th>订单状态</th>
            <th>购买者</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${mysellInfoList}" var="mySell">
            <tr>
                <td>${mySell.orderNo}</td>
                <td>${mySell.totalPrice}</td>
                <td>${mySell.orderTime}</td>
                <td>${mySell.orderStatus}</td>
                <td>${mySell.buyUserName}</td>
                <td><span class="op"><input hidden type="text" value="1"><span hidden>${mySell.orderNo}</span><a class="btn btn-info">展开</a></span><a style="margin-left: 2%" class="btn btn-info" onclick="open_order_note('${mySell.orderNote}')">备注</a></td>
            </tr>
            <tr id="${mySell.orderNo}" class="order_detail">
                <td colspan="6">
                    <table border="1" style="border: #ced4da" class="table text-center">
                        <tr class="text-center">
                            <th>图片</th>
                            <th>名称</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                        </tr>
                        <c:forEach items="${mySell.mySellVo2List}" var="book">
                            <tr>
                                <td><img src="/upload/${book.img}" alt="" width="30" height="40"></td>
                                <td>${book.bookTitle}</td>
                                <td>${book.price}</td>
                                <td>${book.num}</td>
                                <td>${book.subTotal}</td>
                            </tr>
                        </c:forEach>
                    </table>
                </td>
            </tr>
        </c:forEach>
    </table>
</div>
<div class="shade">
</div>
<div class="order-note-show card" id="edit-name-div">
    <div class="col-xs-12 shade_colse">
        <span style="float: left;margin-left: 20px;font-size: 15px">订单备注</span>
        <a style="font-size: 20px;margin-right: 20px" href="javascript:close_order_note()">x</a>
    </div>
    <div class="nav shade_content_div" style="margin-top: -5px">
        <div class="col-xs-12 shade_from" style="margin-top: 0">
            <form action="" method="post">
                <div class="col-xs-12">
                    <textarea id="note" rows="3" cols="30" disabled></textarea>
                </div>
                <div class="col-xs-12">
                    <input type="button" class="sub_set" onclick="close_order_note()" value="关闭"/>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function (){
        $(".order_detail").hide();
        $(".shade").hide();
        $(".order-note-show").hide();
    });
    $(".op").each(function (){
        $(this).click(function (){
            var a = $(this).find('input').val();
            var orderNo = $(this).find('span').text();
            console.log(a);
            if (a == 1){
                $(this).html('<input hidden type="text" value="0"><span hidden>'+orderNo+'</span><a class="btn-info btn">收起</a>');
                $("#"+orderNo).show();
            }else if (a==0){
                $(this).html('<input hidden type="text" value="1"><span hidden>'+orderNo+'</span><a class="btn-info btn">展开</a>');
                $("#"+orderNo).hide();
            }
        });
    })

    function open_order_note(note){
        $("#note").val(note);
        $(".order-note-show").show();
        $(".shade").show();
    }

    function close_order_note(){
        $(".shade").hide();
        $(".order-note-show").hide();
    }
</script>

</body>
</html>
